<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="/views/include/nocachehead.jsp"%>
<title>${attraction.name}</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/map.js"></script>
</head>

<body>
	<%@ include file="/views/include/statusbar.jsp"%>
	<br>
	<br>
	<br>
		
	<div>
		<span>${attraction.name}</span>
		<span>位置：</span>
		<a href="${pageContext.request.contextPath}/attraction/list.html?siteType=COUNTRY&siteId=${attraction.siteId}">${attraction.country}</a>
		<em>&gt;</em>
		<a href="${pageContext.request.contextPath}/attraction/list.html?siteType=PROVINCE&siteId=${attraction.siteId}">${attraction.province}</a>
		<em>&gt;</em>
		<a href="${pageContext.request.contextPath}/attraction/list.html?siteType=CITY&siteId=${attraction.siteId}">${attraction.city}</a>
		<em>&gt;</em>
		<a>${attraction.detailAddress}</a>
	</div>
	<div>
		<a href="${pageContext.request.contextPath}/attraction/view/${attraction.id}.html">
			<img alt="${attraction.name}" src="${pageContext.request.contextPath}/image/${attraction.portrait}">
		</a>
	</div>
	<div id="mapContainer" style="height: 400px; width: 700px;"></div>
	
	<script type="text/javascript">
	$(document).ready(function(){
		var point = new BMap.Point('${attraction.longitude}','${attraction.latitude}');
		initMap('mapContainer');
		recenterMap(point);
		var marker = new BMap.Marker(point); // 创建标注
		var info = ['<div style="float:left">',
		            	'<img title="${attraction.name}" style="height:50px;width:50px;" src="${pageContext.request.contextPath}/image/${attraction.portrait}">',
		            '</div>',
		            '<div style="float:right;padding-left:10px;">',
		            	'<div style="font-size:14px;font-weight:bold;color:#D14836">${attraction.name}</div>',
		            	'<div style="font-size:12px;">地址：${attraction.detailAddress}</div>',
		            '</div>'].join('');
		var infoWindow = new BMap.InfoWindow(info);  // 创建信息窗口对象
		var windowOpened = true;
		marker.addEventListener("click", function(){
			if(windowOpened) {
				this.closeInfoWindow();
			} else {
				this.openInfoWindow(infoWindow);
			}
		});
		marker.addEventListener("infowindowclose", function(){
			windowOpened = false;
		});
		marker.addEventListener("infowindowopen", function(){
			windowOpened = true;
		});
		addMarkerOnMap(map, marker);
		marker.openInfoWindow(infoWindow);
	});

</script>
</body>
</html>